hanye-website/pages/products/[id].vue

<template>
  <div class="py-8">
    <div class="container-custom">
      <div class="mb-4">
        <NuxtLink to="/products" class="text-blue-600 hover:underline flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
          </svg>
          {{ $t('products.title') }}
        </NuxtLink>
      </div>
      
      <ErrorBoundary :error="error">
        <div v-if="isLoading" class="flex justify-center py-12">
          <!-- 加载中 -->
          <div class="animate-spin h-8 w-8 border-4 border-blue-500 rounded-full border-t-transparent"></div>
        </div>
        
        <div v-else-if="product" class="bg-white border border-gray-200 rounded-lg overflow-hidden">
          <div class="h-64 bg-gray-100 flex items-center justify-center">
            <!-- 产品图片占位符 -->
            <span class="text-gray-400 text-xl">{{ product.title }}</span>
          </div>
          
          <div class="p-8">
            <h1 class="text-3xl font-bold mb-4">{{ product.title }}</h1>
            <p class="text-gray-600 mb-6">{{ product.description }}</p>
            
            <div class="border-t border-gray-200 pt-6 mt-6">
              <h2 class="text-xl font-semibold mb-4">产品特点</h2>
              <ul class="list-disc pl-5 space-y-2">
                <li>高品质材料，经久耐用</li>
                <li>精心设计，使用便捷</li>
                <li>多种配置可选，满足不同需求</li>
                <li>售后服务完善，解决后顾之忧</li>
              </ul>
            </div>
            
            <div class="border-t border-gray-200 pt-6 mt-6">
              <h2 class="text-xl font-semibold mb-4">技术规格</h2>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="flex items-center">
                  <span class="font-medium mr-2">尺寸:</span>
                  <span>200 x 300 x 100 mm</span>
                </div>
                <div class="flex items-center">
                  <span class="font-medium mr-2">重量:</span>
                  <span>2.5 kg</span>
                </div>
                <div class="flex items-center">
                  <span class="font-medium mr-2">材质:</span>
                  <span>高级金属合金</span>
                </div>
                <div class="flex items-center">
                  <span class="font-medium mr-2">颜色:</span>
                  <span>银色、黑色、金色</span>
                </div>
              </div>
            </div>
            
            <div class="mt-8">
              <button class="btn btn-primary">
                联系我们了解更多
              </button>
            </div>
          </div>
        </div>
        
        <div v-else class="bg-yellow-50 border border-yellow-200 text-yellow-800 p-4 rounded-md">
          产品不存在或已被删除
        </div>
      </ErrorBoundary>
    </div>
  </div>
</template>

<script setup lang="ts">
/**
 * 产品详情页面
 * 展示单个产品的详细信息
 */
import { ref, onMounted } from 'vue';
import { useErrorHandler } from '~/composables/useErrorHandler';

// 产品接口定义
interface Product {
  id: number;
  title: string;
  description: string;
}

const route = useRoute();
const { error, isLoading, wrapAsync } = useErrorHandler();
const product = ref<Product | null>(null);

// 获取产品ID
const productId = computed(() => {
  const id = route.params.id;
  return typeof id === 'string' ? parseInt(id, 10) : -1;
});

/**
 * 加载产品详情数据
 */
async function loadProduct() {
  if (productId.value <= 0) {
    error.value = new Error('无效的产品ID');
    return;
  }
  
  await wrapAsync(async () => {
    // 模拟API请求延迟
    await new Promise(resolve => setTimeout(resolve, 500));
    
    // 模拟数据，实际项目中应从API获取
    const mockProducts = [
      {
        id: 1,
        title: '产品一',
        description: '这是产品一的详细描述，介绍了产品的功能、特点和适用场景。产品一是我们公司的明星产品，采用了最新技术，具有高效、稳定的特点，广泛应用于各种场景。'
      },
      {
        id: 2,
        title: '产品二',
        description: '这是产品二的详细描述，介绍了产品的功能、特点和适用场景。产品二是我们的经济型产品，性价比高，适合中小型企业使用。'
      },
      {
        id: 3,
        title: '产品三',
        description: '这是产品三的详细描述，介绍了产品的功能、特点和适用场景。产品三专为高端用户设计，提供了全方位的定制服务和专业支持。'
      },
      {
        id: 4,
        title: '产品四',
        description: '这是产品四的详细描述，介绍产品的功能、特点和适用场景。产品四采用模块化设计，可以根据需求进行灵活配置。'
      },
      {
        id: 5,
        title: '产品五',
        description: '这是产品五的详细描述，介绍产品的功能、特点和适用场景。产品五是新一代智能产品，具有自学习能力和远程控制功能。'
      },
      {
        id: 6,
        title: '产品六',
        description: '这是产品六的详细描述，介绍产品的功能、特点和适用场景。产品六是我们的入门级产品，简单易用，适合初学者。'
      }
    ];
    
    const foundProduct = mockProducts.find(p => p.id === productId.value);
    
    if (foundProduct) {
      product.value = foundProduct;
    } else {
      error.value = new Error('未找到该产品');
    }
    
    return product.value;
  });
}

// 页面加载时获取产品数据
onMounted(() => {
  loadProduct();
});

// SEO优化
useHead({
  title: computed(() => product.value ? `${product.value.title} - Hanye` : '产品详情 - Hanye'),
  meta: [
    {
      name: 'description',
      content: computed(() => product.value?.description || '查看产品详细信息、特点和技术规格。')
    }
  ]
});
</script>